import { useState, useEffect } from "react";
import "./index.less";
import { message } from 'antd';
import { request } from "../../../../../common/request";
import { urls } from "../../../../../common/urls";

function Qiandao() {
  const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  const [dayList, setDayList] = useState([[], [], [], [], [], [], []] as any);
  const [qiandaoList, setQiandaoList] = useState({} as any);

  const getQiandaoList = () => {
    request({
      method: "post",
      data: {
        method: urls.qiandaoList
      },
    }).then((res: any) => {
      const { list, ...data } = res.data;
      const resList = [[], [], [], [], [], [], []] as any;
      list.forEach((item: any, index: number) => {
        resList[index % 7].push(item);
      });
      setDayList(resList);
      setQiandaoList(data);
    });
  };

  const submitQiandaoList = () => {
    request({
      method: "post",
      data: {
        method: urls.submitQiandao
      },
    }).then((res: any) => {
      message.success(res.msg);
    }).catch((err) => {
      message.error(err);
    });
  };

  useEffect(() => {
    getQiandaoList();
  }, []);

  return (
    <>
      <div className="qiandao-page text-style">
        <div className="qiandao-page-jifen">
          <div className="qiandao-page-jifen-left">
            <div className="qiandao-page-jifen-num">{ qiandaoList.point }分</div>
            <div className="qiandao-page-jifen-des">我的积分</div>
          </div>
          <div className="qiandao-page-jifen-right" onClick={ submitQiandaoList }>
            <div className="qiandao-page-jifen-btn">立即签到</div>
          </div>
        </div>
        <div className="qiandao-page-calendar">
          <div className="qiandao-page-calendar-time">
            您已连续签到
            <span className="qiandao-page-calendar-num">{ qiandaoList.days }</span>
            天
          </div>
          <div className="qiandao-page-calendar-content">
            {
              week.map((item, index) => {
                return (
                  <div key={index} className="qiandao-page-calendar-col">
                    <div className="qiandao-page-calendar-row">
                      <div className="qiandao-page-calendar-week">{item}</div>
                      {
                        dayList[index].map((dayItem: any, dayIndex: number) => {
                          return (
                            <div key={dayIndex} className="qiandao-page-calendar-dayItem">
                              <div
                                className={ 
                                  dayItem.isSign ? 'qiandao-page-calendar-signText' : 'qiandao-page-calendar-text'
                               }
                              >{ dayItem.day }</div>
                              {
                                dayItem.isSign ?
                                  <img className="qiandao-page-calendar-signIcon" src="/src/assets/icon/dl_xy_xz@2x.png" alt="" /> :
                                  <div className="qiandao-page-calendar-signIcon"></div>
                              }
                            </div>
                          )
                        })
                      }
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>
    </>
  );
}

export default Qiandao;
